import React, { useEffect } from 'react';
import moment from 'moment';
import { DatePicker, Form, Space, Button } from 'antd';
import { DownOutlined } from '#/utils/antdIcons.js';
// @ts-ignore
import { TRCheckboxModal } from '@/components/index.js';
import { BaseSelect } from '../index';
import type { IStationsData, IOptionType, IPostQueryAllIssuePlanListParamsType } from '../../type';
import {
  statusFirstSelOptions,
  statusLastSelOptions,
  statusSecondSelOptions,
} from '../../dictionary';
import { SelectAll } from '../index';
import styles from './index.less';

interface IProps {
  /**
   * 表单值
   */
  values?: IPostQueryAllIssuePlanListParamsType;
  /**
   * 全部交易单元
   */
  stationData?: IStationsData;
  /**
   * 主站源
   */
  dataSourceOptions?: IOptionType[];
  /**
   * 搜索数据
   */
  onSearch?: (values: IPostQueryAllIssuePlanListParamsType) => void;
  /**
   * 改变交易单元
   */
  onChangeStation?: (params: IPostQueryAllIssuePlanListParamsType) => void;
}

const DrawerHeader = (props: IProps) => {
  const [form] = Form.useForm();
  const { values = {}, stationData, dataSourceOptions, onSearch, onChangeStation } = props;

  useEffect(() => {
    const { startDate, endDate, ...rest } = values;
    const _values = {
      ...rest,
      date:
        startDate && endDate
          ? [moment(startDate), moment(endDate)]
          : [moment().subtract(6, 'days'), moment()],
    };
    form && form.setFieldsValue(_values);
  }, [values]);

  // 改变交易单元
  const _onChangeStation = (_val: string[]) => {
    const _value = form && form.getFieldsValue();
    const { date, ...rest } = _value;
    const _startDate = moment(date[0]).format('YYYY-MM-DD');
    const _endDate = moment(date[1]).format('YYYY-MM-DD');
    onChangeStation &&
      onChangeStation({
        ...rest,
        startDate: _startDate,
        endDate: _endDate,
        stationList: _val,
      });
  };

  // 点击交易单元弹出Modal框
  const handelSelectDealElement = async () => {
    const _value = form && form.getFieldsValue();
    let data = _value?.stationList || [];
    data = data.map((item: any) => stationData?.dealElementDataObj[item]?.[0]?.value);
    const result = await TRCheckboxModal.show({
      treeData: stationData?.dealElementModalOptions || [],
      value: data,
      title: '交易单元',
    });
    if (result.index === 1) {
      const checkedKeys = result?.checkedKeys?.map(
        (item: any) => stationData?.dealElementDataObj?.[item]?.[0]?.value,
      );
      _onChangeStation(checkedKeys);
      return checkedKeys;
    } else {
      return data;
    }
  };

  // 搜索
  const onFinish = (data: any) => {
    const { date, ...rest } = data;
    onSearch &&
      onSearch({
        ...rest,
        startDate: moment(date[0]).format('YYYY-MM-DD'),
        endDate: moment(date[1]).format('YYYY-MM-DD'),
      });
  };

  return (
    <div className={styles.container}>
      <Form
        form={form}
        name="filter"
        requiredMark={false}
        colon={false}
        autoComplete="off"
        onFinish={onFinish}
      >
        <Form.Item name="stationList" rules={[{ required: true, message: '请选择' }]}>
          <SelectAll
            placeholder={'交易单元'}
            logo={<DownOutlined />}
            style={{ width: 200 }}
            showArrow={true}
            open={false}
            maxTagCount={1}
            maxTagTextLength={10}
            onClick={handelSelectDealElement}
            allText="全部交易单元"
            options={stationData?.dealElementOptions || ([] as any[])}
          />
        </Form.Item>
        <Form.Item name="date" rules={[{ required: true, message: '请选择' }]}>
          <DatePicker.RangePicker
            format={['YYYYMMDD', 'YYYYMMDD']}
            placeholder={['请选择', '请选择']}
            className={styles.datePicker}
          />
        </Form.Item>
        <Form.Item name="dataSourceList" rules={[{ required: true, message: '请选择' }]}>
          <BaseSelect
            options={dataSourceOptions}
            maxTagCount={1}
            style={{ width: 180 }}
            logo={<DownOutlined />}
            maxTagTextLength={2}
            showArrow={true}
            placeholder={'主站'}
            allText={'全部主站'}
          />
        </Form.Item>
        <Form.Item name="statusFirst" rules={[{ required: true, message: '请选择' }]}>
          <BaseSelect
            options={statusFirstSelOptions}
            maxTagCount={1}
            style={{ width: 180 }}
            maxTagTextLength={2}
            logo={<DownOutlined />}
            showArrow={true}
            placeholder={'执行反馈'}
            allText={'全部'}
          />
        </Form.Item>
        <Form.Item name="statusSecond" rules={[{ required: true, message: '请选择' }]}>
          <BaseSelect
            options={statusSecondSelOptions}
            maxTagCount={1}
            style={{ width: 180 }}
            maxTagTextLength={2}
            logo={<DownOutlined />}
            showArrow={true}
            placeholder={'申报校验'}
            allText={'全部'}
          />
        </Form.Item>
        <Form.Item name="statusLast" rules={[{ required: true, message: '请选择' }]}>
          <BaseSelect
            options={statusLastSelOptions}
            maxTagCount={1}
            style={{ width: 180 }}
            maxTagTextLength={2}
            logo={<DownOutlined />}
            showArrow={true}
            placeholder={'出清校验'}
            allText={'全部'}
          />
        </Form.Item>
        <Space size={'middle'}>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            查询
          </Button>
        </Space>
      </Form>
    </div>
  );
};

export default DrawerHeader;
